<template>
	<div class="page-container">
		<scroll-div scroll-y="true" class="scroll-div">
			<div class="normal-login-container">
				<div class="content-container">
					<!-- 轮播图 -->
					<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true">
						<swiper-item v-for="(item, index) in swiperList" :key="index">
							<image :src="item" mode="aspectFill" class="swiper-image"></image>
						</swiper-item>
					</swiper>

					<!-- 收藏 -->
					<div class="mox">
						<div class="activityname">
							<div class="name">{{ data.goods_name ? data.goods_name : "" }}</div>
							<div class="machs">￥{{ data.goods_price ? data.goods_price : "" }}</div>
							<div class="size">{{ data.goods_describe ? data.goods_describe : "" }}</div>
						</div>
						<div style="margin-top: 10px;">
							<img v-if="!isCollected" class="collect-icon" src="https://shalong.taiyanyue.top/images/antOutline-star2.png"
								alt="" @click="handleCollect(true)" />
							<img v-else class="collect-icon" src="https://shalong.taiyanyue.top/images/antFill-star1.png" alt=""
								@click="handleCollect(false)" />
						</div>
					</div>
					<!-- 活动名称 -->

				</div>
				<div class="activitytime" style="margin-bottom: 20px;">
					<!-- 活动地址 -->
					<div class="address">
						<div class="address-h">详情</div>
						<div style="width: 100%;">
							<rich-text :nodes="data.goods_e"></rich-text>
						</div>
					</div>
				</div>
			</div>
		</scroll-div>
		
		<div class="footer-container">
			<div style="text-align: center; position: relative;" @click="fwcfun()">
				<img 
					id="cartIcon" 
					style="height: 30px;width: 30px;" 
					src="https://shalong.taiyanyue.top/images/riFill-shopping-cart-2-fil1.png" 
					alt="购物车" 
				/>
				<div style="font-size: 13px;color: #339966;">购物车</div>
				<!-- 购物车商品数量标记 -->
				<div v-if="cartCount > 0" class="cart-badge">{{ cartCount }}</div>
			</div>
			<div class="pay-button" @click="addToCart">加入购物车</div>
			<div class="pay-button" style="background-color: #ff9900;" @click="ddqrfun()">立即购买</div>
		</div>
	</div>
</template>

<script>
	import {
		goods_getIndexGoodsInfoById,
		goods_goodsCollectSave,
		goods_getShoppingCartList,
		goods_goodsShoppingCartInfoSave,
		order_confirmGoodsOrderInfo
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				id:"",
				// 轮播图数据
				swiperList: [
				],
				data:{},
				isCollected: false, // 收藏状态
				collectCount: 9, // 基础收藏数
				selectedTime: null, // 选中的时间
				cartCount: 0, // 购物车商品数量
				cartIconRect: null // 购物车图标位置信息
			}
		},
		onLoad(e) {
			this.id=e.id;
			this.goods_getIndexGoodsInfoById()
		},
		onShow() {
			const token = uni.getStorageSync('token');
			// 购物车数量
			if(token){
				this.goods_getShoppingCartList()
			}
		},
		methods: {
		    async goods_getShoppingCartList(){
				const data = await goods_getShoppingCartList();
				this.cartCount = data.content.count;
			},
			async goods_getIndexGoodsInfoById(){
				const data = await goods_getIndexGoodsInfoById({goods_id:this.id});
				this.swiperList=data.content.data.goods_banner_arr;
				this.data=data.content.data;
				this.isCollected=data.content.data.is_collect;
			},
			async ddqrfun(){
				let a=[{
					goods_id:this.data.goods_id,
					purchase_quantity:1
				}]
				const data = await order_confirmGoodsOrderInfo({goods_arr:a})
				if(data.code==200){
					let c={
						order_sn:'',
						data:data.content.data
					}
					const params = encodeURIComponent(JSON.stringify(c));
					  uni.navigateTo({
					    url: `/pages/orderConfirmation?data=${params}`
					  });
				} 
			},
			fwcfun(){
				uni.navigateTo({
					url:'/pages/shoppingCart'
				})
			},
			// 收藏/取消收藏
			handleCollect(status) {
				this.isCollected = status;
				if (status) {
					goods_goodsCollectSave({goods_id:this.data.goods_id}).then(res=>{
						if(res.code==200){
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
								duration: 1500
							});
						}else{
							uni.showToast({
								title: '收藏失败',
								icon: 'none',
								duration: 1500
							});
						}
					})
				} else {
					goods_goodsCollectSave({goods_id:this.data.goods_id}).then(res=>{
						if(res.code==200){
							uni.showToast({
								title: '已取消收藏',
								icon: 'none',
								duration: 1500
							});
						}else{
							uni.showToast({
								title: '取消收藏失败',
								icon: 'none',
								duration: 1500
							});
						}
					})
				}
			},
			
			// 选择时间
			selectTime(dateIndex, timeIndex, timeSlot) {
				this.selectedTime = {
					dateIndex,
					timeIndex,
					timeSlot
				};
				uni.showToast({
					title: `已选择 ${timeSlot.time}`,
					icon: 'none',
					duration: 1500
				});
			},
			
			// 加入购物车
			addToCart() {
				// 显示提示
				goods_goodsShoppingCartInfoSave({goods_id:this.data.goods_id,goods_quantity:1,is_check:1}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title: '购物车数量加一',
							icon: 'none',
							duration: 1500
						});
						// 更新购物车数量
						this.goods_getShoppingCartList();
					}else{
						uni.showToast({
							title: '加入购物车失败',
							icon: 'none',
							duration: 1500
						});
					}
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;
		position: relative;
		padding-bottom: 80px;
		/* 添加与底部栏高度相同的内边距 */
		box-sizing: border-box;
	}

	.scroll-div {
		height: 100%;
	}

	.normal-login-container {
		width: 100%;
		height: 100%;
	}

	.content-container {
		background: #ffffff;
		padding-bottom: 12px;
	}

	.swiper {
		width: 100%;
		height: 350rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.mox {
		width: 89%;
		margin-left: 25px;
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
	}

	.collect-icon {
		width: 30px;
		height: 30px;
	}


	.name {
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: 600;
		margin-top: 10px;
	}

	.machs {
		margin-bottom: 10px;
		font-size: 20px;
		font-weight: 600;
		color: #ea584a;
		margin-bottom: 10px;
	}

	.size {
		font-size: 13px;
		color: #9f9f9f;
	}

	.time {
		color: #3b9c6c;
		font-size: 13px;
		margin-right: 12px;
	}


	.address {
		width: 89%;
		margin-left: 15px;
		margin-top: 20px;
		padding-top: 15px;

		.address-h {
			font-size: 15px;
			color: #a6a6a6;
			font-weight: 500;
			margin-bottom: 6px;
		}
	}

	/* 固定底部支付区域 */
	.footer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80px;
		/* 稍微增加高度以适应更多内容 */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 999;
		padding: 0 15px;
		box-sizing: border-box;

		.pay-button {
			width: 40%;
			height: 40px;
			background-color: #339966;
			color: #ffffff;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 500;
		}
	}

	.activitytime {
		background: #ffffff;
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
		padding-bottom: 15px;
	}
	
	/* 购物车角标 */
	.cart-badge {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #ff0000;
		color: #ffffff;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>